<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: springgreen;
            background-color:rgb(209, 45, 209);
            background-color: rgba(50, 50, 50, .5);
            background-color: #bfa;
            background-color: hsl(45, 100%, 50%);
    }
            /* 颜色单位
                      在css中可以直接使用颜色名来设置颜色 
                          比如：red，green等
                          但是在css中直接使用颜色名不方便

                rgb值
                     -通过三种颜色不同的浓度来调配不同的颜色
                     -r  red  g green  b blue
                      -每种颜色的范围在0~255（0%~100%）
                      语法；rgb（红色，绿色，篮色）
                             --三个值为零=黑色，全为255白色

                rgba
                     -在rgb上增加透明效果（0完全透明，1完全不透明）
                     -需要四个值，前三个值颜色，第四个表示透明度

                十六进制颜色
                     -语法：#红色绿色蓝色
                     -颜色浓度通过（00-ff）
                     两位重复可以简写

                HSL值 HSLA
                     H色相（0~360）
                     S颜色浓度（0%~100%）
                     L亮度（0%~100%）

                      */
                          
            
        
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>
</html>